let Utils = require("../../framework/js/utils");

class UiExampleCss extends window.AUI.BaseComponent {
    constructor(name) {
        super(name);
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">
        <h5>文档</h5>
        <hr better/>
        <script type="x-template" id="uigriddoc">### 工具类    

所有工具类均可以提供sm md lg模式           
            
##### display
            
    @include aui-create-display("$type$", $medianame) // 创建display属性
            
| 类名 | 用处 | 是否有强制模式 | 
| ------| ------ | ------ |
| aui-display-inline-block | display: inline-block | yes |
| aui-display-block | display: block | yes |
| aui-display-flex | display: flex | yes |
| aui-display-inline-flex | display: inline-flex | yes |

##### text-align
            
    @include aui-create-text("$type$", $medianame) // 创建text属性
            
| 类名 | 用处 | 是否有强制模式 | 
| ------| ------ | ------ |
| aui-text-align-left | text-align: left | yes |
| aui-text-align-right | text-align: right | yes |
| aui-text-align-center | text-align: center | yes |
| aui-text-align-justify | text-align: justify | yes |
    
##### position
            
    @include aui-create-position("$type$", $medianame) // 创建position属性
            
| 类名 | 用处 | 是否有强制模式 | 
| ------| ------ | ------ |
| aui-position-relative | position: relative | yes |
| aui-position-absolute | position: absolute | yes |
| aui-position-static | position: static | yes |
| aui-position-fixed | position: fixed | yes |
    
</script>
    </div>
</div> 
<aui-markdown class="markdown-body" :value="doc"></aui-markdown>
</div>`;
    }
    _mounted() {
        var self = this;
        self.doc = document.getElementById("uigriddoc").innerHTML.trim();
    }
    _data() {
        var ret = {};
        ret.doc = '';
        return ret;
    }
}


window.AUI.customCompoents.define("ui-example-css", UiExampleCss);

module.exports = {
    template: `
        <div class="anu-subpage" style="width: 100%;">    
            <ui-example-css></ui-example-css>
        </div>
    `,
    data() {
        var ret = {};
        return ret;
    },
    mounted() {
        var self = this;
        rootcontroller.getPage(self).attachChildComponentReady();
    },
    methods: {
        service() {
        },
        openModal() {
            var self = this;
        },
        onError(e) {
            console.log('-------------------');
            console.log(e);
            console.log('-------------------');
        }
    }
};